<template>
  <div>
    <div class="header">
      <van-nav-bar
        title="购物车"
        left-text="返回首页"
        left-arrow
        @click-left="$router.push('/home')"
      >
        <template #left>
          <van-icon name="arrow-left" size="25" color="black" />
        </template>
        <template #right>
          <van-button
            round
            type="info"
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            size="small"
            @click="delAll"
          >
            删除全部商品
          </van-button>
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <div class="nothing" v-if="empty">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="购物车为空"
        />
      </div>
      <div class="hasthing" v-else>
        <van-swipe-cell
          v-for="(item, index) in cartList"
          :key="index"
          :name="item.cartid"
          :before-close="beforeClose"
        >
          <van-checkbox
            v-model="item.flag"
            @click="toggleAll(item.cartid, item.flag)"
          >单选</van-checkbox>
          <van-card
            num="2"
            :price="item.originprice"
            :title="item.proname"
            :thumb="item.img1"
          >
            <template #num>
              <van-stepper
                v-model="item.num"
                theme="round"
                button-size="22"
                disable-input
                @change="addNum(item.cartid, item.num)"
              />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
        <!-- 底部合计 -->
        <div>
          <van-submit-bar
            :price="addSum"
            button-text="提交订单"
            @submit="onSubmit"
            class="bottom"
            decimal-length=""
          >
            <van-checkbox v-model="isAll">全选</van-checkbox>
            <template #tip>
              你的收货地址不支持同城送,
              <span>修改地址</span>
              <!-- <van-button
                round
                type="info"
                color="linear-gradient(to right, #ff6034, #ee0a24)"
                size="small"
                @click="delAll"
              >
                删除全部商品
              </van-button> -->
            </template>
          </van-submit-bar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Empty,
  Card,
  Stepper,
  SwipeCell,
  Checkbox,
  CheckboxGroup,
  SubmitBar,
  Dialog,
} from "vant";

Vue.use(Empty);
Vue.use(Card);
Vue.use(Stepper);
Vue.use(SwipeCell);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(SubmitBar);
Vue.use(Dialog);
import {
  getCartUser,
  upDataCartUser,
  delCartUser,
  upDataCartState,
  upDataCartStateAll,
  delCartUserAll,
} from "./../api/cart";
export default {
  name: "Cart",
  components: {},
  data() {
    return {
      empty: true,
      checked: true,
      cartList: [],
      // num: "",
      flag: "",
    };
  },
  created() {
    //判断用户是否登录
    if (localStorage.getItem("token")) {
      //发送获取购物车请求
      getCartUser({ userid: localStorage.getItem("userid") }).then((res) => {
        if (res.data.code == "10020") {
          //没有数据
          this.empty = true;
        } else {
          //有数据
          this.empty = false;
          this.cartList = res.data.data;
          console.log(this.cartList);
        }
      });
    } else {
      //去到登录页
      this.$router.push("Login");
    }
    //发送获取购物车请求
    this.getCart();
  },
  methods: {
    //发送获取购物车请求
    getCart() {
      getCartUser({ userid: localStorage.getItem("userid") }).then((res) => {
        if (res.data.code == "10020") {
          //没有数据
          this.empty = true;
        } else {
          //有数据
          this.empty = false;
          this.cartList = res.data.data;
          console.log(this.cartList);
        }
      });
    },
    onSubmit() {},
    //数量更新
    addNum(cartid, num) {
      upDataCartUser({ cartid, num }).then((res) => {
        console.log(res);
      });
    },
    // 删除购物车列表
    beforeClose({ name, position, instance }) {
      console.log(name, position, instance);
      switch (position) {
        case "right":
          Dialog.confirm({
            message: "确定删除吗？",
          })
            .then(() => {
              // 确定删除
              delCartUser({ cartid: name }).then((res) => {
                console.log(res);
                if (res.data.code == "200") {
                  this.getCart();
                }
              });
              instance.close();
            })
            .catch(() => {
              instance.close();
            });
          break;
      }
    },
    //删除全部商品
    delAll() {
      delCartUserAll({ userid: localStorage.getItem("userid") }).then((res) => {
        console.log(res);
        Dialog.confirm({
          message: "确定删除吗？",
        })
          .then(() => {
            // 确定删除
            delCartUser({ cartid: name }).then((res) => {
              console.log(res);
              if (res.data.code == "200") {
                this.getCart();
              }
            });
            // instance.close();
          })
          .catch(() => {
            // instance.close();
          });
      });
    },
    //更新购物车选中状态单条
    toggleAll(cartid, flag) {
      upDataCartState({ cartid: cartid, flag: flag }).then((res) => {
        console.log(res);
      });
    },
  },
  computed: {
    //计算总价
    addSum() {
      var sumPrice = 0;
      this.cartList.forEach((item) => {
        if (item.flag) {
          sumPrice += item.originprice * item.num * 100;
        }
      });
      return sumPrice;
    },
    //更新购物车选中状态全部
    isAll: {
      set(val) {
        this.cartList.forEach((item) => {
          item.flag = val;
        });
        upDataCartStateAll({
          userid: localStorage.getItem("userid"),
          type: val,
        }).then((res) => {
          console.log(res);
        });
      },
      get() {
        return this.cartList.every((item) => item.flag == true);
      },
    },
  },
};
</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
}
.header {
  height: 0.5rem;
}
.main {
  flex: 1;
  height: 5.73rem;
  background-color: #f2f2f2;
}
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
.delete-button {
  height: 100%;
}
::v-deep .van-swipe-cell__wrapper {
  display: flex;
  background-color: #fff;
}

::v-deep .van-card {
  flex: 1;
  background-color: #fff;
}
.bottom {
  margin-bottom: 0.44rem;
}

</style>